<template>
	<!-- 在此组件中 制作一个对话框 -->
	<el-dialog title="新增事件" :visible.sync="dialogVisible" width="75%">
		<el-form ref="form" label-width="80px" style="padding: 20px; ">
			<el-form-item label="标题">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="作者/单位">
				<el-input v-model="form.author"></el-input>
			</el-form-item>
			<el-form-item label="描述">
				<el-input type="textarea" v-model="form.describes"></el-input>
			</el-form-item>
			<el-form-item label="事件类型" prop="eventType">
				<el-select v-model="form.eventType.id" placeholder="请选择事件类型" style="width: 100%;">
					<el-option :key="index" v-for="(eventType,index) in eventTypes" :label="eventType.name" :value="eventType.id"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="封面/图片">
				<el-upload
				  class="avatar-uploader"
				  :headers="head" 
				  name="file"
				  :action="backServer"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess">
				  <img v-if="form.cover" :src="imgurl + form.cover" class="avatar">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			
			<el-form-item label="内容">
				<mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="change" :codeStyle="codeStyle" style="width: 100%;" />
			</el-form-item>
		</el-form>
		<p slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save()">保 存</el-button>
		</p>
	</el-dialog>
	
</template>

<script>
	export default {
		name: "AddEvent", //组件名称
		data() {
			return {
				codeStyle: 'vs2015', // 代码风格配色
				dialogVisible:false,
				eventTypes:[],
				head:{
					token:window.sessionStorage.getItem("token"),
				},
				backServer:this.$backServers + "/admin/eventCtl/upload",
				imgurl:this.$imgService,
				form: {
					title: '',
					author:'',
					cover: '',
					type: '',
					describes: '',
					content: '',
					eventType:{
						id:'',
					}
				},
			};
		},
		methods: {
			save() {
				this.$http.post("admin/eventCtl/saveEvents",this.form).then((res)=> {
					if(resp.data.code == 200){
						this.$message({
							message: resp.data.message,
							type:'success'
						});
						this.dialogVisible=false;
						this.$router.go();
					}
					if(resp.data.code == 201){
						this.$message({
							message: resp.data.message,
							type:'warning'
						})
					}
				})
				window.location.reload();
			},
			handleAvatarSuccess(res, file) {
				console.log(res);
				this.form.cover = res.data;
			},
			//markdown渲染
			change(value, render) {
				// render 为 markdown 解析后的结果[html]
				this.html = render;
			},
			// 将图片上传到服务器，返回地址替换到md中
			// 绑定@imgAdd event
			// 绑定@imgAdd event
			$imgAdd(pos, $file) {
				// 封装数据
				var formData = new FormData()
				formData.append('file', $file)
				// 上传图片给后台
				this.$http.post('/admin/eventCtl/uploads', formData).then(res => {
					var url = this.imgurl + res.data.data;
					this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
				});
			},
			
		},
		mounted(){
			this.$http.get("admin/eventTypeCtl/findEventTypeList").then((resp)=>{
				console.log(resp.data);
				this.eventTypes = resp.data.data;
			})
		}
	};
</script>

<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 150px;
	    line-height: 150px;
	    text-align: center;
	  }
	  .avatar {
	    width: 150px;
	    height: 150px;
	    display: block;
	  }
</style>
